﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title style="height: 500px">朋友圈动态</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="/css/myStrategyComment.css"/>
<link rel="stylesheet" href="/css/friendnews/app.css">
<script src="/js/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
<script src="/js/plugins/jrender/jrender.min.js"></script>
<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
<script src="/js/plugins/dialog2/dialog.min.js"></script>
<link rel="stylesheet" href="/js/friendnews/jqueryAlert/common.css">
<script src="/js/friendnews/jqueryAlert/alertPopShow.js"></script>


<style type="text/css">
	* {cursor: pointer;}
	.weui_mask_transition {
		display: none;
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0);
		-webkit-transition: background .3s;
		transition: background .3s;
	}
	.weui_fade_toggle {
		background: rgba(0, 0, 0, 0.6);
	}
	.weui_actionsheet {
		position: fixed;
		left: 0;
		bottom: 0;
		-webkit-transform: translate(0, 100%);
		-ms-transform: translate(0, 100%);
		transform: translate(0, 100%);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		z-index: 2;
		width: 100%;
		background-color: #EFEFF4;
		-webkit-transition: -webkit-transform .3s;
		transition: transform .3s;
	}
	.weui_actionsheet_toggle {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	.weui_actionsheet_menu {
		background-color: #FFFFFF;
	}
	.weui_actionsheet_cell:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		border-top: 1px solid #D9D9D9;
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		-ms-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	.weui_actionsheet_cell:first-child:before {
		display: none;
	}
	.weui_actionsheet_cell {
		position: relative;
		padding: 10px 0;
		text-align: center;
		font-size: 18px;
	}
	.weui_actionsheet_cell.title {
		color: #999;
	}
	.weui_actionsheet_action {
		margin-top: 6px;
		background-color: #FFFFFF;
	}

</style>

</head>
<body>


<script>
	$(function () {

        //取出当前登录的用户
        var user = JSON.parse(sessionStorage.getItem("user"));
        //更新当前用户的最后更新时间
		/*$.ajax({
			url:"/users/"+user.id+"/dynamicLastPullTimes",
			method:"put",
            dataType:"json",
			success:function () {

            }
		})*/


        //当前用户的回显
		$.get("/users/"+user.id,function (data) {
            $("#user-name").html(data.nickName);
            $("#bg").attr("src",data.coverImgUrl);
            $("#avt").attr("src",data.headImgUrl);
        });
		//当前用户的朋友圈
		$.get("/users/"+user.id+"/friendNews",function (data) {
            console.log(data);
            if(data.list.length>0){
                //插入动态 显示发布时间
                $("#list").renderValues(data,{
                    getDate:function (item,value) {
                        $(item).html(getDateDetail(value));
                    },
                    getGoodUserName:function (item,value) {//点赞回显
                        if(value){
                            var temp="";
                            $.each(value,function (index,ele) {
                                temp+=ele.nickName+" ";

                            });

                            $(item).html(temp);

                        }


                    },
                    getComment:function (item,value) {		//评论回显
						if(value){
                            var temp = '';
                            $.each(value,function (index,ele) {
                                console.log(ele);
                                if(ele.byUser){
                                    temp+="<p class='data-name' data-dynamicid='"+ele.friendNews.id+"' data-byuserid='"+ele.reply.id+"'><span >"+ele.reply.nickName+"</span>回复<span>"+ele.byUser.nickName+"</span><span>：</span>"+ele.content+"</p>";
                                }else{
                                    temp+="<p class='data-name' data-dynamicid='"+ele.friendNews.id+"' data-byuserid='"+ele.reply.id+"'><span >"+ele.reply.nickName+"</span><span>: </span>"+ele.content+"</p>";
                                }
                            });
                            $(item).html(temp);
                        }
                    },
                    getDynamicId:function (item,value) {//渲染时 每个点赞按钮绑定动态的id
                        $(item).attr("data-id",value);
                        $(item).children("span").attr("data-id",value);

                    }
                });
            }else {
                console.log(data);
                    $(document).dialog({
                        type : 'confirm',
                        closeBtnShow: true,
                        content: '没有朋友圈动态信息!',
                        onClickConfirmBtn: function(){
                            location.href="/mine/profiles.html"
                        },
                        onClickCancelBtn : function(){
                            location.href="/mine/profiles.html"                        },
                        onClickCloseBtn  : function(){
                            location.href="/mine/profiles.html"                        }
                    });
            }

            //=============================人名点击回复 带被回复人
            $(".data-name").click(function () {
                var _this =this;//用于回复成功 拼接回复内容回去
                var byUserId = $(this).data("byuserid"); //被回复人的id
				var byUserName = $(this).children("span:first").html(); //被回复人的名字
                var dynamicId = $(this).data("dynamicid"); //取出当前动态的id
                //如果是回复评论 占位符中显示被回复的人的nickName
                var html = "<label>内容：<input class='confirm_input' placeholder='回复 : "+byUserName+"'></label>";
                popTipShow.confirm('回复',html,['回 复','取 消'],
                    function(e){
                        //callback 处理按钮事件
                        var button = $(e.target).attr('class');
                        if(button == 'ok'){
                            if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
                                webToast("评论不能为空！","bottom", 3000);
                                return;
                            }
                            this.hide();
                            //按下确定按钮执行的操作
                            var content = $(".confirm_input").val(); //取出内容
                            var dynamicComment ={//评论对象
                                content:content
                            };
                            $.post("/friendNews/"+dynamicId+"/reply/"+byUserId,dynamicComment,function (data) {
                                if (data.success) {
                                    //============如果成功把回复的内容拼接过去
                                    var temp = "<p class='data-name' data-dynamicid='"+data.data.dynamicId+"' data-byuserid='"+data.data.user.id+"'>" +
									"<span >"+data.data.user.nickName+"</span>回复" +
									"<span>"+data.data.byUser.nickName+"</span>" +
									"<span>：</span>"+data.data.content+"</p>"
									$(_this).parent().children(":last").append(temp);
                                }
                            },"json");

                        }
                        if(button == 'cancel') {//取消
                            this.hide();

                        }
                    }
                );

            });

            //================================回复按钮的点击事件
            $(".userComment").click(function () {
                var _this =this;//用于回复成功 拼接回复内容回去
                var dynamicId = $(this).data("id"); //取出当前会的动态的id
                //如果是回复评论 占位符中显示被回复的人的nickName
                var html = "<label>内容：<input class='confirm_input' placeholder=''></label>";
                popTipShow.confirm('回复',html,['回 复','取 消'],
                    function(e){
                        //callback 处理按钮事件
                        var button = $(e.target).attr('class');
                        if(button == 'ok'){
                            if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
                                webToast("评论不能为空！","bottom", 3000);
                                return;
                            }
                            this.hide();
                            //按下确定按钮执行的操作
                            var content = $(".confirm_input").val(); //取出内容
							var dynamicComment ={//评论对象
								content:content

							};
                            $.post("/friendNews/"+dynamicId+"/reply/-1",dynamicComment,function (data) {
                                console.log(data);
                                if (data.success) {//拼接无回复人的状态
                                    var temp = "<p class='data-name' data-dynamicid='"+data.data.dynamicId+"' data-byuserid='"+data.data.user.id+"'>" +
									"<span >"+data.data.user.nickName+"</span>" +
									"<span>: </span>"+data.data.content+"</p>"
                                    if ($(_this).parent().siblings(".cmt-wrap").children(":last").find("p").length>0) {//如果没人回复信息
                                        $(_this).parent().siblings(".cmt-wrap").children(":last").children(":last").append(temp);
                                    }else{//如果有人回复了信息
                                        $(_this).parent().siblings(".cmt-wrap").children(":last").append(temp);
									}
                                }
                            });
                        }
                        if(button == 'cancel') {//取消
                            this.hide();
                        }
                    }
                );

            });
            //点赞按钮的点击事件================================
            $(".userGood").click(function () {
                var temp = $(this).data("id");//动态的id
                $.ajax({
					url:"/friendNews/"+temp+"/liker",
					method:"POST",
					success:function () {
                       var names = $("span[data-id='" + temp + "']").html();
                        if (names.indexOf(user.nickName)>-1) {
                            $("span[data-id='" + temp + "']").html(names.replace(user.nickName,""));
                        }else{
                            $("span[data-id='" + temp + "']").html(names+user.nickName);
						}
                    }
				})
            });

            //图片点击放大功能
			$(".list-img").click(function () {
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

            });
            function imgShow(outerdiv, innerdiv, bigimg, _this) {
                var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                $(bigimg).attr("src", src);//设置#bigimg元素的src属性
                $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg


                $(outerdiv).click(function () {//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }
        });
    })
</script>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;">
			<div id="innerdiv" style="margin:auto;width: 800px; height: 800px;margin-top:33%;">
				<img id="bigimg" style="border: 5px solid #fff; margin: 0 auto;width: 366px; height: 400px; " src="" />
			</div>
			</div>
		</div>
	</div>
</div>



<div class="search-head">
	<div class="row nav-search">
		<div class="col">
			<a href="/mine/profiles.html">
				<span><i class="fa fa-chevron-left" ></i></span>
			</a>
		</div>
		<div class="col">
			<span>我的朋友圈</span>
		</div>
		<div class="col"></div>
	</div>
</div>
<div style="margin:0 auto;display:none;">
<img class="data-avt" src="/imgs/0.jpg">
</div>
<header>
<img id="bg" src="/imgs/bg.jpg">
<p id="user-name" class="data-name"></p>
<img id="avt" class="data-avt" src="/imgs/0.jpg">
</header>
<div id="main">
<div id="list" >
	<ul >
		<div render-loop="list">
		<li>
			<div class="po-avt-wrap">
				<img class="po-avt data-avt" render-src="list.friend.headImgUrl">
			</div>
			<div class="po-cmt">
				<div class="po-hd">
					<p class="po-name"><span class="data-name" render-html="list.friend.nickName">唐老爷</span></p>
					<div class="post">
                        <ul>
                            <li class="comment-img" render-loop="list.picsForHtml">
                                <img class="list-img" render-src="list.picsForHtml.picture" style="height: 300px;">
                            </li>
                            <li>
                                <p render-html="list.content"></p>
                            </li>
                        </ul>
					</div>
					<p class="time"  render-key="list.releaseTime" render-fun="getDate"></p>
					<a class="userComment"  data-id="" render-key="list.id" render-fun="getDynamicId" ><!--评论按钮-->
						<img class="c-icon" src="/imgs/c.png">
					</a>
				</div>
				<div class="r"></div>
				<div class="cmt-wrap">
					<div class="like">
						<a class="userGood"  data-id="" render-key="list.id" render-fun="getDynamicId">
							<img src="/imgs/l.png"><!--点赞按钮-->
							<span class="thumb" data-id="" render-key="list.liker" render-fun="getGoodUserName"  >

							</span>
						</a>
					</div>
					<!--data-id="" render-key="list.dynamic.id" render-fun="getDynamicId"-->
					<div class="cmt-list"  render-key="list.replies" render-fun="getComment">

					</div>
				</div>
			</div>
		</li>
		</div>


	</ul>
</div>

</div>

<script>

function safetostring(str) {
	return String(str).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'");
}

//$("#list").html($("#scene").html());

setTimeout(function () {
	// $(".data-name").text(safetostring(nickname));
	//$(".data-avt").attr("src", headimgurl);
	var cw = $('.list-img').width();
	$('.list-img').css({'height': cw + 'px'});
}, 0);

$(window).resize(function () {
	var cw = $('.list-img').width();
	$('.list-img').css({'height': cw + 'px'});
});


$(document.body).show();
//日期格式
function getDateDetail(date){
    var d = new Date(parseInt(date));
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var hour  = d.getHours();
    var minute = d.getMinutes();

    var dNow = new Date();
    var yearNow = dNow.getFullYear();
    var monthNow = dNow.getMonth()+1;
    var dayNow = dNow.getDate();
    var hourNow  = dNow.getHours();
    var minuteNow = dNow.getMinutes();
    if(year==yearNow){
        if(month==monthNow){
            if(day==dayNow){
                if(hour==hourNow){
                    return (minuteNow-minute)+"分钟前";
                }else{
                    return (hourNow-hour)+"小时前";
                }
            }else{
                if(dayNow-day<=3){
                    return (dayNow-day)+"天前";
                }
            }
        }
    }
    return year+"-"+month+"-"+day;
}




</script>

</body>
</html>